<script setup>
import HomePanel from "@/views/Home/components/HomePanel.vue"
import { getNewAPI } from '@/apis/home'
const newList = ref([])
const getNewList = async () => {
  const res = await getNewAPI()  
  newList.value = res.result
}
onMounted(()=>getNewList())
</script>


<template>

  <HomePanel title="新书速递" sub-title="新书驾到，速览为赢">
<ul class="goods-list">
    <li v-for="item in 16" :key="item.id">
      <RouterLink to="/">
        <img src="@/assets/images/bc1.jpg" alt="" />
        <p class="name">长安的荔枝</p>
        <p class="author">马伯庸</p>
      </RouterLink>
    </li>
  </ul>

  </HomePanel>
</template>

<style scoped lang="scss">
.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 600px;

  li {
    width: 150px;
    height: 203px;

    background: #fff;
    transition: all .5s;

    &:hover {
      transform: translate3d(0, -5px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    img {
      width: 150px;
      height: 203px;    
    }

    p {
      font-size: 18px;
      padding-top: 12px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .author {
      font-size: 15px;
      color: #aaa;
    }
  }
}

</style>